<template>
  <z-paging
    ref="paging"
    v-model="dataList"
    :fixed="false"
    :default-page-size="100"
    :refresher-complete-delay="500"
    :auto-show-system-loading="false"
    use-virtual-list
    use-compatibility-mode
    v-bind="$attrs"
    @query="queryList"
  >
    <template #loading>
      <slot name="loading"></slot>
    </template>
  </z-paging>
</template>

<script setup>
/**
 * 通用上拉加载 下拉刷新组件
 * @property {Function} api 分页请求接口
 * @property {Object|null} searchInfo 多余请求参数
 */
import { ref, useAttrs } from 'vue'

const {api} = useAttrs()
const paging = ref(null)
const dataList = ref([])
const queryList = (pageNo, pageSize) => {
  if (api) {
    api({pageNo, pageSize}).then(res => {
      paging.value.complete(res.data.list)
    })
  }
}
</script>

<style lang="scss" scoped></style>
